import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Row, Col, List, Icon } from "antd";
// 组件
import Author from "../components/Author";

import Tags from "../components/Tags";
import Img from "../components/Img";
import store from "../store";
import http from "../config/http";
import storage from "../config/storage";

const Index = (props) => {
  const state = store.getState();
  const [mylist, setMylist] = useState(state.list);
  //订阅Redux的状态
  store.subscribe(storeChange);
  // state改变后，页面需要重新set值
  function storeChange() {
    const data = store.getState();
    setMylist(data.list);
  }
  // 一进入页面进行的操作
  useEffect(() => {
    let obj = { pageSize: state.pageSize, currentPage: state.currentPage };
    let tag = storage.get("filterTag");
    if (tag) {
      obj = Object.assign(obj, { tag });
      console.log(tag);
    }
     getList(obj);
  }, []);
  // 获取列表
 const getList = function (params) {
  http
    .get("/tourist/articles", { params })
    .then((res) => {
      if (res.code === 1) {
        const formattedData = res.data.map((item) => {
          // 提取 markdownContent 中的图片链接
          let picUrl = null;
          try {
            const matches = item.markdownContent.match(/http.*?\.(png|jpg|gif)/);
            picUrl = matches ? matches[0] : null;
          } catch (e) {}

          return {
            id: item.id,
            title: item.title,
            desc: item.contentHtml.replace(/<[^>]+>/g, "").substring(0, 50)+"...", // 去除 HTML 标签并截取前100字符
            pic: picUrl,
            addDate: item.createdAt ? new Date(item.createdAt).toLocaleDateString() : "未知",
            read: item.viewCount || 0,
            star: item.commentCount || 0,
          };
        });

        const action = {
          type: "GET_LIST",
          value: formattedData,
        };
        store.dispatch(action);
      }
    });
};
  const IconText = ({ type, text }) => (
    <span>
      <Icon type={type} style={{ marginRight: 8 }} />
      {text}
    </span>
  );

  return (
    <div>
      {/* 内容 */}
      <Row className="comm-main Index" type="flex" justify="center">
        <Col
          className="comm-left animated fadeInUp"
          xs={24}
          sm={24}
          md={16}
          lg={16}
          xl={16}
        >
          <List
            // 添加样式类
            className="custom-list"
            // 或内联样式
            style={{ marginBottom: '24px' }}
            dataSource={mylist}
            itemLayout="vertical"
            pagination={{
              onChange: (page) => {
                let obj = { pageSize: state.pageSize, currentPage: page };
                getList(obj);
              },
              pageSize: state.pageSize,
              total: state.total,
            }}
            renderItem={(item) => (
              <Link to={"/detail/" + item.id} style={{ width: '100%' }}>
              <List.Item
                key={item.id}
                style={{ marginBottom: '15px',backgroundColor: 'rgba(255, 255, 255, 1)',borderRadius: '10px' }}
                actions={[
                  <IconText
                    type="calendar"
                    text={item.addDate}
                    key="list-vertical-star-o"
                  />,

                ]}
                extra={<Img src={item.pic} /> }
              >
                <List.Item.Meta
                  title={<Link to={"/detail/" + item.id} 
                  style={{ 
                    fontSize: '48px', 
                    fontWeight: 'bold', 
                    color: 'blueSlate',
                    lineHeight: '1.5'
                  }}
                  >{item.title}</Link>}
                  description={item.desc}
                />
              </List.Item>
              </Link>
            )}
          ></List>
        </Col>
        <Col
          className="comm-right animated fadeInUp"
          xs={0}
          sm={0}
          md={7}
          lg={6}
          xl={5}
        >
          <Author />
          <Tags click={getList} />
          {/* <Newest /> */}
        </Col>
      </Row>
    </div>
  );
};

export default Index;
